<template>
	<view>
		<template v-if="title!=='访客'">
			<view class="list-item" v-for="item in list">
				<avator :img="item.headImage" :nickName="item.nickname" :sex="item.sex" :vip="item.vip"
					:isReal="item.isReal" @click.native="goToDetail(item.uid)"></avator>
				<div @click="focus(item)">
					<span v-if="item.state === 1" class="btn cancel-focus">取消关注</span>
					<span v-if="item.state === 0" class="btn focus">关注</span>
					<span v-if="item.state === 2" class="btn cancel-focus">互相关注</span>
				</div>
			</view>
		</template>
		<template v-else>
			<view class="list-item" v-for="item in list">
				<view v-if="item.locks === 0" class="item">
					<avator :img="defaultImg" nickName="神秘访客" sex="未知"></avator>
					<div @click="unlock(item)">
						<span class="btn focus">解锁</span>
					</div>
				</view>
				<view v-else class="item">
					<avator :img="item.headImage" :nickName="item.nickname" :sex="item.sex" :vip="item.vip"
						:isReal="item.isReal" @click.native="goToDetail(item.uid)"></avator>
					<div @click="focus(item)">
						<span v-if="item.state === 1" class="btn cancel-focus">取消关注</span>
						<span v-if="item.state === 0" class="btn focus">关注</span>
						<span v-if="item.state === 2" class="btn cancel-focus">互相关注</span>
					</div>
				</view>

			</view>
		</template>
	</view>
</template>

<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import avator from '@/components/avator.vue'
	export default {
		components: {
			avator: avator
		},
		data() {
			return {
				defaultImg: 'https://img0.baidu.com/it/u=1788222800,1191136850&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200',
				nameMap: {
					'关注': 'concernList',
					'足迹': 'footprintList',
					'粉丝': 'fanList',
					'访客': 'visitorList'
				},
				list: [],
				title: ''
			};
		},
		onLoad(param) {
			uni.setNavigationBarTitle({
				title: param.type
			});
			this.title = param.type
			this.init();
		},
		methods: {
			unlock(item) {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '是否消耗5点缘分值解锁访客信息？',
					success: function(res) {
						if (res.confirm) {
							request(url.unlockVisitor, 'GET', {
								id: item.id
							}).then(res => {
								if (res.status === 200) {
									uni.showToast({
										title: '解锁成功'
									})
									setTimeout(() => {
										that.init()
									}, 500)
								} else {
									uni.showToast({
										title: res.msg
									})
								}

							}).catch(err => {
								uni.showToast({
									title: err.msg
								})
							})
						} else if (res.cancel) {}
					}

				})
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/PersonalDetail/PersonalDetail?uid=${id}`,
				})
			},
			init() {
				request(url[this.nameMap[this.title]], 'GET', {
					page: 1,
					limit: 100
				}).then(res => {
					console.log(res)
					if (res.status === 200) {
						this.list = res.data;
					}
				})
			},
			focus(item) {
				request(url.focus, 'GET', {
					uid: item.uid
				}).then(res => {
					console.log(res)
					if (res.status === 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.init();
					} else {
						uni.showToast({
							title: '操作失败，请稍后重试',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="less">
	* {
		box-sizing: border-box;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #dcdcdc;

		.item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

	}

	.btn {
		padding: 3px 6px;
		border-radius: 3px;
		font-size: 10px;
		font-family: SimHei;
	}

	.cancel-focus {
		border: 1px solid #E5E5E5;
		color: #8C8C8C;
	}

	.focus {
		border: 1px solid #FC9380;
		color: #FC9380;
	}
</style>
